<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Pikachu Volleyball</title>
    <meta name="description" content="Play the game Pikachu Volleyball" />
    <meta name="author" content="Kyutae Lee" />

    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="theme-color" content="#FFFFFF" />
    <meta name="apple-mobile-web-app-title" content="Pikachu Volleyball" />
    <link
      rel="apple-touch-icon"
      sizes="192x192"
      href="../resources/assets/images/IDI_PIKAICON-1_gap_filled_192.png"
    />
    <link rel="manifest" href="./manifest.json" />

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="../resources/assets/images/IDI_PIKAICON-0.png"
    />
    <link rel="stylesheet" href="../resources/style.css" />
  </head>
  <body>
    <div id="flex-container">
      <div id="menu-bar">
        <div class="btn-container left">
          <div class="relative-container">
            <button
              type="button"
              id="game-dropdown-btn"
              class="btn dropdown-btn"
            >
              Game
            </button>
            <div id="game-dropdown" class="dropdown">
              <button type="button" id="pause-btn" class="btn">
                <span class="check">&check; </span>Pause
              </button>
              <button type="button" id="restart-btn" class="btn">
                Restart
              </button>
            </div>
          </div>
          <div class="relative-container">
            <button
              type="button"
              id="options-dropdown-btn"
              class="btn dropdown-btn"
            >
              Options
            </button>
            <div id="options-dropdown" class="dropdown">
              <div class="relative-container">
                <button
                  type="button"
                  id="bgm-submenu-btn"
                  class="btn submenu-btn"
                >
                  BGM &#9654;&#xfe0e;
                </button>
                <div id="bgm-submenu" class="submenu">
                  <button type="button" id="bgm-on-btn" class="btn selected">
                    <span class="check">&check; </span>on
                  </button>
                  <button type="button" id="bgm-off-btn" class="btn">
                    <span class="check">&check; </span>off
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="sfx-submenu-btn"
                  class="btn submenu-btn"
                >
                  SFX &#9654;&#xfe0e;
                </button>
                <div id="sfx-submenu" class="submenu">
                  <button type="button" id="stereo-btn" class="btn selected">
                    <span class="check">&check; </span>stereo
                  </button>
                  <button type="button" id="mono-btn" class="btn">
                    <span class="check">&check; </span>mono
                  </button>
                  <button type="button" id="sfx-off-btn" class="btn">
                    <span class="check">&check; </span>off
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="speed-submenu-btn"
                  class="btn submenu-btn"
                >
                  Speed &#9654;&#xfe0e;
                </button>
                <div id="speed-submenu" class="submenu">
                  <button type="button" id="slow-speed-btn" class="btn">
                    <span class="check">&check; </span>slow
                  </button>
                  <button
                    type="button"
                    id="medium-speed-btn"
                    class="btn selected"
                  >
                    <span class="check">&check; </span>medium
                  </button>
                  <button type="button" id="fast-speed-btn" class="btn">
                    <span class="check">&check; </span>fast
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="winning-score-submenu-btn"
                  class="btn submenu-btn"
                >
                  Winning score &#9654;&#xfe0e;
                </button>
                <div id="winning-score-submenu" class="submenu">
                  <button type="button" id="winning-score-5-btn" class="btn">
                    <span class="check">&check; </span>5 pts
                  </button>
                  <button type="button" id="winning-score-10-btn" class="btn">
                    <span class="check">&check; </span>10 pts
                  </button>
                  <button
                    type="button"
                    id="winning-score-15-btn"
                    class="btn selected"
                  >
                    <span class="check">&check; </span>15 pts
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="practice-mode-submenu-btn"
                  class="btn submenu-btn"
                >
                  Practice mode &#9654;&#xfe0e;
                </button>
                <div id="practice-mode-submenu" class="submenu">
                  <button type="button" id="practice-mode-on-btn" class="btn">
                    <span class="check">&check; </span>on
                  </button>
                  <button
                    type="button"
                    id="practice-mode-off-btn"
                    class="btn selected"
                  >
                    <span class="check">&check; </span>off
                  </button>
                </div>
              </div>
              <button type="button" id="reset-to-default-btn" class="btn">
                Reset to default
              </button>
            </div>
          </div>
          <div class="color-scheme-toggle-switch-container">
            <input
              type="checkbox"
              id="dark-color-scheme-checkbox-1"
              class="toggle-switch dark-color-scheme-checkbox"
            />
            <label for="dark-color-scheme-checkbox-1"></label>
          </div>
        </div>
        <div class="btn-container right">
          <button type="button" id="about-btn" class="btn glow">
            <span class="text-about hidden">About</span
            ><span class="text-play">Play</span>
          </button>
        </div>
      </div>
      <div class="if-embedded-in-other-website hidden">
        <div class="limit-width">
          It seems that you are playing this web version of
          <span class="no-wrap">Pikachu Volleyball</span>
          in some foreign website. If you visit the following link directly, you
          can play the game in a pleasant environment without ads.
          <div class="original-address">
            The original address of this web version of Pikachu Volleyball:<br />
            <a
              href="https://gorisanson.github.io/pikachu-volleyball/en/"
              target="_blank"
              rel="noopener"
              >https://gorisanson.github.io/pikachu-volleyball/en/</a
            >
          </div>
          <button type="button" class="btn-in-box">
            <span>close</span>
          </button>
        </div>
      </div>
      <div id="game-canvas-container">
        <div class="fade-in-box about" id="about-box">
          <div id="about-box-head">
            <h1>Pikachu Volleyball</h1>
            <p class="languages">
              <a href="../zh/" target="_self">Chinese(中文)</a> | &check;
              English |
              <a href="../ko/" target="_self">Korean(한국어)</a>
            </p>
            <p class="p2p-online-version">
              You can also play
              <a
                href="https://gorisanson.github.io/pikachu-volleyball-p2p-online/en/"
                >the peer-to-peer online version</a
              >.
            </p>
            <p class="original-by">
              The original Pikachu Volleyball (対戦ぴかちゅ～　ﾋﾞｰﾁﾊﾞﾚｰ編) was
              developed by<br />
              1997 (C)
              <span class="no-wrap">SACHI SOFT / SAWAYAKAN Programmers</span
              ><br />
              1997 (C) <span class="no-wrap">Satoshi Takenouchi</span>
            </p>
            <p class="reverse-engineered-by">
              The original game was reverse engineered<br />
              and implemented into this web version by<br />
              <span class="no-wrap"
                ><a href="https://gorisanson.github.io/">Kyutae Lee</a></span
              >
            </p>
            <p class="source-code-on">
              You can view the source code on
              <a
                href="https://github.com/gorisanson/pikachu-volleyball"
                target="_blank"
                rel="noopener"
                >GitHub</a
              >.
            </p>
            <p class="release-date">Release Date: 2020-03-26</p>
            <p class="update-history-on">
              <a href="./update-history/" target="_self">Update history</a>
            </p>
          </div>
          <div class="margin-top limit-width">
            <div class="align-center-horizontally">
              <img
                class="screenshot"
                src="../resources/assets/images/screenshot.png"
                width="1728"
                height="1216"
                alt="Pikachu Volleyball game screenshot"
              />
            </div>
            <p>
              Pikachu Volleyball is an old Windows game which was developed in
              Japan in 1997. The game was popular in Korea when I was young. I
              had played it with my friends.
            </p>
            <p>
              This web version is made by reverse engineering the original game
              and implementing it to JavaScript. It is executed directly on the
              web browser so, unlike the original game, you can play it
              regardless of the operating system of your computer.
            </p>
            <p class="margin-top"><span class="thick">Controls:</span></p>
            <div class="align-center-horizontally">
              <img
                class="controls"
                src="../resources/assets/images/controls.png"
                width="1994"
                height="997"
                alt="game controls"
              />
              <p>
                If you have a Bluetooth keyboard, you can play also on your
                touch/mobile devices.
              </p>
            </div>
            <p class="margin-top">
              <span class="thick">Tip 1:</span><br />
              Like the original game, when you select
              <span class="no_wrap">"1人でぴかちゅ~"</span> to play against the
              computer, you would play as player 1 if you select by pressing the
              "Z" key, or you would play as player 2 if you select by pressing
              the Enter key.
            </p>
            <p class="margin-top">
              <span class="thick">Tip 2:</span><br />
              Player 1 has the "V" key as an additional down key. The "V" key
              works differently compared to the "F" key, so you can try using
              it. (<span class="no-wrap"
                ><a
                  href="https://twitter.com/repeat_c/status/1256494157884841984"
                  target="_blank"
                  rel="noopener"
                  >Thanks to @repeat_c</a
                ></span
              >, this characteristic of the original game could be reflected in
              this web version.)
            </p>
            <p class="margin-top">
              <span class="thick">Tip 3:</span><br />
              If you want to hide/show the game menu bar, press the Esc key.
            </p>
            <p class="margin-top">
              <span class="thick">Tip 4:</span><br />
              I've added a practice mode which is not in the original game, you
              can turn on this mode at
              <span class="no_wrap"
                >"Options &rarr; Practice mode &rarr; on"</span
              >.
            </p>
            <p class="margin-top">
              <span class="thick">Tip 5:</span><br />
              If you want to play this game without the need for an internet
              connection, you can install this page as an app on your device. On
              a computer,
              <a
                href="https://support.google.com/chrome/answer/9658361"
                target="_blank"
                rel="noopener"
                >use the Chrome browser to install</a
              >. On a mobile device, "Add to Home Screen" this page.
            </p>
            <div class="margin-top">
              <button
                type="button"
                id="close-about-btn"
                class="btn-in-box glow"
              >
                <span class="text-close hidden">close</span
                ><span class="text-play">Play</span>
              </button>
            </div>
            <div class="for-margin"></div>
          </div>
        </div>
        <div class="fade-in-box notice hidden" id="notice-box-1">
          <p>
            The winning score can not be set to the
            <span id="winning-score-in-notice-box-1"></span> pts, since the
            score is already reached.
          </p>
          <button type="button" id="notice-ok-btn-1" class="btn-in-box">
            OK
          </button>
        </div>
        <div class="fade-in-box notice hidden" id="notice-box-2">
          <p>
            There's no point adjusting the winning score in practice mode.<br />
            You can turn off practice mode at
            <span class="no_wrap"
              >"Options &rarr; Practice mode &rarr; off"</span
            >.
          </p>
          <button type="button" id="notice-ok-btn-2" class="btn-in-box">
            OK
          </button>
        </div>
        <div class="fade-in-box loading hidden" id="loading-box">
          <div>
            <p>Loading the game assets...</p>
            <div id="progress-bar-border">
              <div id="progress-bar" style="width: 0%"></div>
            </div>
          </div>
        </div>
        <div
          class="fade-in-box update hidden"
          id="update-notification-message-box"
        >
          A new version is available. Update now?
          <div>
            <button type="button" class="update" id="update-now">
              Update Now (current game state will be lost)
            </button>
            <button type="button" class="update" id="later">
              Later (automatically at relaunching the browser)
            </button>
          </div>
        </div>
      </div>
    </div>
    <script type="module">
      /*
       * Register service worker with some configuration for service worker update notice.
       * Major parts of the code below are copied from: https://developers.google.com/web/tools/workbox/guides/advanced-recipes
       */
      import { Workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-window.prod.mjs';

      function createUpdateUIPrompt(callback) {
        const notificationBox = document.getElementById(
          'update-notification-message-box'
        );
        const elementList = document.getElementsByClassName('fade-in-box');
        const updateNowButton = document.getElementById('update-now');
        const laterButton = document.getElementById('later');

        updateNowButton.addEventListener('click', function () {
          notificationBox.classList.add('hidden');
          callback.onAccept();
        });
        laterButton.addEventListener('click', function () {
          notificationBox.classList.add('hidden');
        });

        for (const element of elementList) {
          element.classList.add('hidden');
        }
        notificationBox.classList.remove('hidden');
      }

      if ('serviceWorker' in navigator) {
        const wb = new Workbox('../sw.js');
        // Add an event listener to detect when the registered
        // service worker has installed but is waiting to activate.
        wb.addEventListener('waiting', (event) => {
          const prompt = createUpdateUIPrompt({
            onAccept: async () => {
              // Assuming the user accepted the update, set up a listener
              // that will reload the page as soon as the previously waiting
              // service worker has taken control.
              wb.addEventListener('controlling', (event) => {
                window.location.reload();
              });
              // Send a message telling the service worker to skip waiting.
              // This will trigger the `controlling` event handler above.
              wb.messageSW({ type: 'SKIP_WAITING' });
            },
          });
        });

        wb.register();
      }
    </script>
  </body>
</html>
